<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" th:href="@{/assets/images/index/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" href="../css/cart_style.css" th:href="@{/assets/css/cart_style.css}">


    <title>我的订单列表</title>
    <style type="text/css">
        body, table {
            font-size: 14px;
        }
        table {
            table-layout: fixed;
            empty-cells: show;
            border-collapse: collapse;
            margin: 0 auto;
        }
        td {
            height: 40px;
        }
        h1, h2, h3 {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }
        .table {

            border: 0px solid #cad9ea;
            color: #666;
        }
        .table th {
            background-repeat: repeat-x;
            height: 45px;
        }
        .table td, .table th {
            border: 1px solid #cad9ea;
            padding: 0 1em 0;
        }
        .table tr.alter {
            background-color: #f5fafe;
        }
        :root {
            --height: 100px;
            --width: 200px;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            width: 100%;
            height: 10px;
            background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 50%);
            font-family: sans-serif;
        }
        body, table1 {
            font-size: 12px;
        }
        table1 {
            table-layout: fixed;
            empty-cells: show;
            border-collapse: collapse;
            margin: 0 auto;
        }
        td {
            height: 40px;
        }
        h1, h2, h3 {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }
        .table1 {

            border: 0px solid #cad9ea;
            color: #666;
        }
        .table1 th {
            background-repeat: repeat-x;
            height: 40px;
        }
        .table1 td, .table1 th {
            border: 0px solid #cad9ea;
            padding: 0 1em 0;
        }
        .table1 tr.alter {
            background-color: #f5fafe;
        }
        :root {
            --height: 100px;
            --width: 200px;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            width: 100%;
            height: 10px;
            background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 50%);
            font-family: sans-serif;
        }
        .demo{width:460px; margin:20px auto 0 auto; height:70px;}
        .button {
            display: inline-block;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;
            padding: .5em 4em .55em;
            text-shadow: 0 1px 1px rgba(0,0,0,.3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }
        .button:hover {
            text-decoration: none;
        }
        .button:active {
            position: relative;
            top: 1px;
        }
        .bigrounded {
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em;
        }
        .medium {
            font-size: 20px;
            padding: .4em 1.5em .42em;
        }
        .small {
            font-size: 11px;
            padding: .2em 1em .275em;
        }


        /* blue */
        .blue {
            color: #d9eef7;
            border: solid 1px #0076a3;
            background: #0095cd;
            background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
            background: -moz-linear-gradient(top,  #00adee,  #0078a5);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
        }
        .blue:hover {
            background: #007ead;
            background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
            background: -moz-linear-gradient(top,  #0095cc,  #00678e);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
        }
        .blue:active {
            color: #80bed6;
            background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
            background: -moz-linear-gradient(top,  #0078a5,  #00adee);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
        }
        /* green */
        .green {
            color: #e8f0de;
            border: solid 1px #538312;
            background: #64991e;
            background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
            background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
        }
        .green:hover {
            background: #538018;
            background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
            background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
        }
        .green:active {
            color: #a9c08c;
            background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
            background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
        }

        /* white */
        .white {
            color: #606060;
            border: solid 1px #b7b7b7;
            background: #fff;
            background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
            background: -moz-linear-gradient(top,  #fff,  #ededed);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
        }
        .white:hover {
            background: #ededed;
            background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
            background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
        }
        .white:active {
            color: #999;
            background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
            background: -moz-linear-gradient(top,  #ededed,  #fff);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
        }

        /* orange */
        .orange {
            color: #fef4e9;
            border: solid 1px #da7c0c;
            background: #f78d1d;
            background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
            background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
        }
        .orange:hover {
            background: #f47c20;
            background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
            background: -moz-linear-gradient(top,  #f88e11,  #f06015);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
        }
        .orange:active {
            color: #fcd3a5;
            background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
            background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
        }

        input {
            border: 1px solid #ccc;
            padding: 7px 0px;
            border-radius: 3px;
            padding-left: 5px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
        }

        input:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }

    </style>
</head>

<body>
<div class="topnav">
    <nav>

        <div class="nav_r">
            <a th:href="@{/myorder(userId=${userId})}">我的订单</a>
            <span class="liner">|</span>
<!--            <a th:href="@{/tupdata(userId=${userId})}" class="myself">个人中心</a>-->
            <a href="update" class="myself">个人中心</a>
        </div>

    </nav>
    1
</div>
<header>

</header>
<main>
    <div class="show">
        <div class="top">
            <p>
            </p>
            <p>
            </p>
        </div>
        <form method="post" th:action="@{/paytype}" >

            <table width="90%" class="table" >
                <tr class="alter">
                    <th colspan="5"><h1>我的订单</h1></th>

                </tr>
                <tr>
                    <th th:rowspan="2">订单编号</th>
                    <th th:rowspan="2">生成日期</th>
                    <th th:rowspan="2">订单状态</th>
                    <th th:colspan="2" th:rowspan="2">操作</th>
                </tr>
                <tr></tr>
                <tr class="alter" th:each="order:${orders}" >
                    <th th:text="${order.ordernum}"></th>
                    <th th:text="${order.time}"></th>
                    <th th:text="${order.state}" ></th>
                    <th >
                       <span > <a  th:href="@{/ordermsg(orderId=${order.orderId})}" class="button orange bigrounded">查看</a></span>
                    </th>

                    <th th:switch="${order.state}"  id="my_state" th:fragment="my_state">
                        <span> <a  th:case="已支付"    href="javascript:void(0)" th:onclick="state_chan1([[${order.orderId}]])" class="button blue bigrounded"> 退款</a></span>
                        <span>  <a  th:case="未支付"     th:href="@{/order(orderId=${order.orderId})}" class="button white bigrounded">支付</a></span>
                        <span>  <a  th:case="已完成"     th:href="@{/message(orderId=${order.orderId})}" class="button white bigrounded">评论</a></span>
                    </th>
                </tr>
            </table>
            <table width="90%" class="table1">
                <tr><th colspan="5"></th></tr> <tr><th colspan="3"></th>
            <th colspan="2">
                <a class="button blue bigrounded"  th:href="@{/toMain(userId=${userId})}">主页</a>
            </th>
            </tr>
                <tr><th colspan="5"></th></tr><tr><th colspan="5"></th></tr>
                <tr><th colspan="5"></th></tr><tr><th colspan="5"></th></tr><tr><th colspan="5"></th></tr><tr><th colspan="5"></th></tr>
            </table>

        </form>

    </div>
    <footer>
        <div class="promise">
        </div>
        <div class="full">
            <ul>
                <li></li>
                <li>100%正品保证</li>
                <li></li>
                <li>快速配送服务</li>
                <li></li>
                <li>运费满额减免</li>
                <li></li>
                <li>7天退换货无忧</li>
                <li></li>
                <li>保税仓直发</li>
            </ul>
        </div>
        <div class="last">
            <div class="last_l">
                <p>
                    <span>在线搜索</span>
                    <span class="liner">|</span>
                    <span>快捷支付</span>
                </p>
                <p>
                    <a href="http://jira2.suncaper.net/projects/TEAM16/issues/TEAM16-62?filter=allopenissues">关于我们</a>
                    <span class="liner">|</span>
                    <a href="http://jira2.suncaper.net/projects/TEAM16/issues/TEAM16-62?filter=allopenissues">加入</a>

                </p>
                <p>© Team16 酒店辅助订购系统
                </p>
            </div>

        </div>
    </footer>
</main>
<div class="well">




</div>
<script th:src="@{/assets/js/state_change.js}"></script>
<script th:src="@{/assets/js/jquery.js}"></script>
<script th:src="@{/assets/js/jquery.filterizr.min.js}"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script th:src="@{/assets/js/jquery-ui.min.js}"></script>
<script th:src="@{/assets/js/jquery.counterup.min.js}"></script>
<script th:src="@{/assets/js/jquery.sticky.js}"></script>
</body>


</html>
